/* Skip link for accessibility */
    .skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: #0d6efd;
      color: #fff;
      padding: 8px 16px;
      z-index: 100;
    }
    .skip-link:focus {
      top: 0;
    }

  .my-hero{
    min-height: 50vh; 
    background: linear-gradient(135deg, #0d6efd, #2563eb);
    border-bottom-left-radius: 25% 5%;
    border-bottom-right-radius: 25% 5%;
  }

  .my-footer{        
    border-top-left-radius: 25% 5%;
    border-top-right-radius: 25% 5%;
  }

  .mycard:hover {
  transform: translateY(-5px);
  transition: transform 0.3s;
}

.card:hover{
  transform: none;
  transition: none;
}

 .breadcrumb-item a {
    color: #383838;
  }

 .breadcrumb-item.active {
    color: #6d6e6d;
  }  

  .qr-code {
    width: 50vw;        /* 50 % av viewport-bredd */
    max-width: 400px; /* säkerhetsgräns */
    height: auto;       /* behåll proportioner */
    animation: qrFadeIn 2s ease-out forwards;
   /* animation: qrPulse 3s ease-in-out infinite;    */
}

@keyframes qrFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes qrPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.qr-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== PWA MODAL BAS ===== */
.pwamodal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1000;
}

.pwamodal.is-open {
  display: block;
}

/* ===== OVERLAY ===== */
.pwamodal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  /* Safari / äldre WebKit */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ===== KORT ===== */
.pwamodal-card {
  position: relative;
  background: #fff;
  width: 90%;
  max-width: 420px;
  margin: 10vh auto;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);

  animation: slideUp 0.3s ease;
}

/* ===== HEADER ===== */
.pwamodal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #eee;
}

.pwamodal-close {
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

/* ===== BODY ===== */
.pwamodal-body {
  padding: 1.5rem;
  line-height: 1.6;
}

/* ===== FOOTER ===== */
.pwamodal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #eee;
}

/* ===== BUTTONS ===== */
.pwabtn {
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
}

.pwabtn-primary {
  background: #0d6efd;
  color: white;
}

.pwabtn-secondary {
  background: #e9ecef;
}

.ios-pwa {
  text-align: center;
}

.ios-app-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  margin: 1rem auto;
}

.ios-install-steps {
  text-align: left;
  margin: 1rem auto;
  max-width: 260px;
}

.ios-install-steps li {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.ios-note {
  font-size: 0.85rem;
  color: #666;
}

.pwabtn-full {
  width: 100%;
}

.steps-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px; /* vertical spacing between steps */
  overflow: visible;
}

/* Vertical line behind all circles */
.vertical-line {
  position: absolute;
  top: 25px;  /* center of first circle */
  bottom: 25px; /* center of last circle */
  left: 23px;  /* half of 50px circle width */
  width: 4px;
  background-color: #dee2e6;
  z-index: 1; /* behind circles */
}

.step {
  display: flex;
  align-items: flex-start;
  position: relative;
}

/* Circle */
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #6c757d;
  color: white;
  font-weight: bold;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2; /* above line */
  flex-shrink: 0;
  position: relative;
}

.circle.completed {
  background-color: #8bd37e;
}

/* Step content */
.step-content {
  margin-left: 15px; /* space between circle and text */
}




/* ===== ANIMATION ===== */
@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}